<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <style type="text/css">
        em{
            font-style: normal;
            color: red;
        }
    </style>
</head>
<body>
    <!--添加form表单-->
    <form class="layui-form" id="addForm" style="display: none;padding: 15px 15px 5px 5px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">图书编号</label>
            <div class="layui-input-block">
                <input type="text" name="id" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图书名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">作者</label>
            <div class="layui-input-block">
                <input type="text" name="author" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图书价</label>
            <div class="layui-input-block">
                <input type="text" name="price" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addFilter">添加</button>
            </div>
        </div>
        <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
    </form>
    <!--添加按钮-->
    <button type="button" class="layui-btn" id="addBtn">添加</button>
    <!--搜索框-->
    <div class="layui-inline">
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="name" id="search" placeholder="请填写图书名"/>
        </div>
    </div>
    <button class="layui-btn layui-btn-sm" id="searchBtn">搜索</button>
    <!--展示表格-->
    <table id="myTable" lay-filter="tableFilter"></table>
    <!--toolbar工具栏-->
    <script type="text/html" id="bar">
        <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
        <a class="layui-btn layui-btn-xs" lay-event="upd">修改</a>
    </script>
    <!--修改的form表单-->
    <form class="layui-form" id="updateForm" lay-filter="updateFormFilter" style="display: none;padding: 15px 15px 5px 5px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">图书编号</label>
            <div class="layui-input-block">
                <input type="text" name="id" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图书名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">作者</label>
            <div class="layui-input-block">
                <input type="text" name="author" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图书价</label>
            <div class="layui-input-block">
                <input type="text" name="price" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="updateFilter">修改</button>
            </div>
        </div>
        <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
    </form>
    <!--layui代码-->
    <script>
        layui.use(['table','form','layer'],function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.$;
            //渲染表格
            table.render({
                elem:'#myTable',
                url:'book/select2',
                height:312,
                page:true,
                limit:3,
                limits:[3,4,5],
                cols:[[
                    {field:'id',title:'图书编号',width:80, sort: true},
                    {field:'name',title:'图书名称',width:180, sort: true},
                    {field:'author',title:'作者',width:180, sort: true},
                    {field:'price',title:'价格',width:180, sort: true},
                    {fixed: 'right',title:'操作', toolbar: '#bar'}
                ]]
            })
            //搜索
            $('#searchBtn').click(function () {
                table.reload('myTable',{
                    where:{
                        // url:'book/select2',
                        name:$('#search').val()
                    }
                    ,page:{
                        curr:1//重新从第一页开始
                    }
                })
            })
            //添加操作
            $('#addBtn').click(function () {
                //点击添加按钮 弹出添加页面
                layer.open({
                    type:1,
                    title:'添加页面',
                    area:'500px',
                    content:$('#addForm')
                })
            })
            form.on('submit(addFilter)',function (obj) {
                $.ajax({
                    url:'book/add',
                    data:$('#addForm').serialize(),
                    success:function (result) {
                        if(result.flag){
                            layer.msg('添加成功');
                            $('#addForm')[0].reset();
                            table.reload('myTable');
                            layer.closeAll();
                        }else{
                            layer.msg('添加失败');
                        }
                    }
                })
                return false;//阻止表单提交
            })
            //tool工具栏  删除和修改
            table.on('tool(tableFilter)',function (obj) {
                if(obj.event=='del'){
                    //删除操作
                    layer.confirm('确认要删除此数据吗？',function (index) {
                        $.ajax({
                            url:'book/remove',
                            data:'id='+obj.data.id,
                            success:function (result) {
                                if(result.flag){
                                    layer.msg('删除成功');
                                    table.reload('myTable');
                                }else{
                                    layer.msg('删除失败');
                                }
                            }
                        })
                        layer.close(index);
                    })
                }else if(obj.event=='upd'){
                    //修改操作
                    layer.open({
                        type:1,
                        title:'修改页面',
                        area:'500px',
                        content:$('#updateForm')
                    })
                    $.ajax({
                        url:'book/getOne',
                        data:'id='+obj.data.id,
                        success:function (result) {
                            form.val('updateFormFilter',{
                                id:result.id,
                                name:result.name,
                                author:result.author,
                                price:result.price
                            })
                        }
                    })
                    form.on('submit(updateFilter)',function (obj) {
                        $.ajax({
                            url:'book/update',
                            data:$('#updateForm').serialize(),
                            success:function (result) {
                                if(result.flag){
                                    layer.msg('更新成功');
                                    table.reload('myTable');
                                    layer.closeAll();
                                }else{
                                    layer.msg('更新失败');
                                }
                            }
                        })
                        return false;
                    })
                }
            })

        })
    </script>
</body>
</html>